<template>
  <div>
    <div style="width:100%;height:500px" ref="chart"></div>
  </div>
</template>

<script>
export default {
  name: 'sftu',
  data () {
    return {
      list: [],
      timess: [],
      bmoney: [],
      zmoney: [],
      smoney: []
    }
  },
  methods: {
    async initCharts () {
      const myChart = this.$echarts.init(this.$refs.chart)
      const { data } = await this.$axios.post('/waterlist')
      console.log(data.list)
      this.list = data.list
      var str = ''
      this.list.forEach(function (e) {
        str += e.timess + ','
      })
      str = str.substring(0, str.length)
      this.timess = str.split(',')
      var strs = ''
      this.list.forEach(function (e) {
        strs += e.bmoney + ','
      })
      strs = strs.substring(0, strs.length)
      this.bmoney = strs.split(',')
      var str1 = ''
      this.list.forEach(function (e) {
        str1 += e.zmoney + ','
      })
      str1 = str1.substring(0, str1.length)
      this.zmoney = str1.split(',')
      var str2 = ''
      this.list.forEach(function (e) {
        str2 += e.smoney + ','
      })
      str2 = str2.substring(0, str2.length)
      this.smoney = str2.split(',')
      myChart.setOption({
        title: {
          text: '水费统计图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['银行', '住宅', '商场']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.timess
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '银行',
            type: 'line',
            stack: '总量',
            data: this.bmoney
          },
          {
            name: '住宅',
            type: 'line',
            stack: '总量',
            data: this.zmoney
          },
          {
            name: '商场',
            type: 'line',
            stack: '总量',
            data: this.smoney
          }
        ]
      })
    }
  },
  mounted () {
    this.initCharts()
  }
}
</script>

<style scoped>

</style>
